<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* background-attachment属性决定背景，图片的位置是在视口内固定，或者随着包含它的区块滚动。 */
        /* fixed  自己滚动条不动，外部滚动条不动。*/
        /* local  自己滚动条动，外部滚动条动。*/
        /* scroll 自己滚动条不动，外部滚动条动，默认值。*/
        div.dd{
            width: 200px;
            height: 200px;
            overflow:scroll ;
            background-image: url(3.png);
            background-attachment: fixed;
        }
        body{
            background-color: aliceblue;
            height: 3000px;
        }

        div.d1 {
            width: 400px;
            height: 400px;
            background-color: blanchedalmond;
            margin: 20px;
            border: 1px solid #000;
        }

        div.box {
            margin: 20px;
            width: 400px;
            height: 600px;
            border: 1px solid #000;
            background-image: url(4.png);
            /* 当backgroud-attachmend是fixed的时候，不能两个都是center */
            background-position: 30px center;
            background-size: 400px 600px;
            background-attachment: fixed;
        }
        
    </style>
</head>
<body>
    <div class="dd">
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
        <p>内容</p>
    </div>

    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d1"></div>
</body>
</html>